<template>
    <ContentWrap>
        <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px" label-width="85px" @submit.native.prevent>
            <el-form-item label="反馈人姓名" prop="userName">
                <el-input v-model="queryParams.userName" class="!w-240px" clearable placeholder="请输入反馈人姓名" @keyup.enter="handleQuery"/>
            </el-form-item>
            <el-form-item label="归属学校" prop="schoolId" v-if="tenantId == 1">
                <el-select v-model="queryParams.schoolId" placeholder="请选择" class="!w-240px" clearable>
                    <el-option v-for="item in schools" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="handleQuery">
                    <Icon class="mr-5px" icon="ep:search"/>
                    搜索
                </el-button>
                <el-button @click="resetQuery">
                    <Icon class="mr-5px" icon="ep:refresh"/>
                    重置
                </el-button>
            </el-form-item>
        </el-form>
    </ContentWrap>

    <ContentWrap>
        <el-table v-loading="loading" :data="list">
            <el-table-column label="头像" prop="avatar" width="50">
                <template #default="scope">
                    <div style="width: 36px; height: 36px">
                        <el-image v-if="scope.row.avatar" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" preview-teleported hide-on-click-modal/>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="姓名" prop="memberName" width="120"/>
            <el-table-column label="人员类型" prop="type">
                <template #default="scope">
                    <dict-tag :type="DICT_TYPE.YXT_USER_TYPE" :value="scope.row.type"/>
                </template>
            </el-table-column>
            <el-table-column label="所属院校" prop="schoolName" min-width="150" show-overflow-tooltip/>
            <el-table-column label="反馈内容" prop="content" min-width="250" show-overflow-tooltip/>
            <el-table-column label="反馈图片" prop="avatar" width="100">
                <template #default="scope">
                    <div style="width: 36px; height: 36px">
                        <el-image v-if="scope.row.shotCut" :src="scope.row.shotCut" :preview-src-list="[scope.row.shotCut]" preview-teleported hide-on-click-modal>
                            <template #error>
                            </template>
                        </el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column :formatter="dateFormatter" label="反馈时间" prop="createTime" width="180"/>
        </el-table>
        <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo"
                    :total="total" @pagination="getList"/>
    </ContentWrap>
</template>

<script lang="ts" setup>
import {dateFormatter} from '@/utils/formatTime'
import {useFeedBackApi} from "@/api/yxt/feedback";
import {DICT_TYPE} from "@/utils/dict";
import {getTenantId} from "@/utils/auth";
import {useSchoolApi} from "@/api/yxt/school";

defineOptions({name: 'YxtFeedBack'})

const schoolApi = useSchoolApi();
const feedBackApi = useFeedBackApi();

const tenantId = getTenantId();

const loading = ref(true)
const total = ref(0)
const list = ref([])
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    schoolId: '',
    userName: '',
})
const queryFormRef = ref()
const schools = ref([])

const getList = async () => {
    loading.value = true
    try {
        const data = await feedBackApi.getFeedBackList(queryParams)
        list.value = data.list
        total.value = data.total
    } finally {
        loading.value = false
    }
}

const handleQuery = () => {
    queryParams.pageNo = 1
    getList()
}

const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
}

onMounted(async () => {
    await getList();
    schools.value = await schoolApi.getSimpleList();
})
</script>
